<template>
  <div class="admin-home">
    <div class="page-view admin-home_items">
      <div class="title">网页访问量</div>
      <v-chart :options="optionView" :autoresize="true" />
    </div>
    <div class="post-data admin-home_items">
      <div class="title">全部文章数据</div>
      <v-chart :options="optionPost" :autoresize="true" />
    </div>
    <div class="admin-home_items post-frequency">
      <div>
        <div class="title">近一月写作量</div>
        <div class="echarts-wrapper">
          <div class="echarts-wrapper_left">
            <p>121<span> 篇</span></p>
          </div>
          <v-chart :options="optionFrequency" :autoresize="true" />
        </div>
      </div>
      <div>
        <div class="title">今日TOP5</div>
        <v-chart :options="optionTop" :autoresize="true" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      optionView: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: '4%',
          y: '10%',
          x2: '4%',
          y2: '10%'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: [
              '2021-10-12',
              '2012-12-31',
              '2011-12-11',
              '2011-12-11',
              '2011-12-11',
              '2011-12-11',
              '2011-12-11'
            ],
            axisLine: {
              show: false,
              lineStyle: {
                color: '#209F85',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: '#209F85',
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            position: 'left',
            splitNumber: 4,
            name: '(件)',
            nameTextStyle: {
              fontSize: 12,
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#209F85',
                width: 1
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#209F85',
                fontSize: 12
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#3a70c3',
                width: 2
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(114,126,68,0.15)'
              }
            }
          }
        ],
        series: [
          {
            name: '访问量',
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            data: [12, 100, 32, 200, 12, 30, 123],
            smooth: true,
            itemStyle: {
              normal: {
                color: '#209F85'
              }
            },
            lineStyle: {
              width: 3,
              color: '#209F85',
              shadowColor: '#B1D5CD',
              shadowBlur: 4,
              shadowOffsetY: 4
            }
          }
        ]
      },
      optionPost: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: '4%',
          y: '10%',
          x2: '4%',
          y2: '10%'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: [
              '2021-10-12',
              '2012-12-31',
              '2011-12-11',
              '2011-12-11',
              '2011-12-11',
              '2011-12-11',
              '2011-12-11'
            ],
            axisLine: {
              show: false,
              lineStyle: {
                color: '#209F85',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: '#209F85',
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            position: 'left',
            splitNumber: 4,
            name: '(件)',
            nameTextStyle: {
              fontSize: 12,
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#209F85',
                width: 1
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#209F85',
                fontSize: 12
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#3a70c3',
                width: 2
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(114,126,68,0.15)'
              }
            }
          }
        ],
        series: [
          {
            name: '阅读量',
            type: 'line',
            data: [12, 100, 32, 200, 12, 30, 123],
            smooth: true,
            itemStyle: {
              normal: {
                color: '#209F85'
              }
            }
          },
          {
            name: '评论数',
            type: 'line',
            data: [11, 21, 33, 1213, 11, 231, 121],
            smooth: true,
            itemStyle: {
              normal: {
                color: '#FF5E20'
              }
            }
          }
        ]
      },
      optionFrequency: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: '8%',
          y: '10%',
          x2: '4%',
          y2: '10%'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: [
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22',
              '2012-12-22'
            ],
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              interval: 0,
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 4,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'transparent'
              }
            }
          }
        ],
        series: [
          {
            name: '写作量',
            type: 'line',
            data: [
              2,
              3,
              1,
              2,
              3,
              2,
              0,
              3,
              1,
              2,
              2,
              3,
              1,
              2,
              3,
              2,
              0,
              3,
              1,
              2,
              2,
              3,
              1,
              2,
              3,
              2,
              0,
              3,
              1,
              2,
              2
            ],
            itemStyle: {
              normal: {
                color: '#fff'
              }
            }
          }
        ]
      },
      optionTop: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          x: '8%',
          y: '10%',
          x2: '4%',
          y2: '10%'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['vue', 'vue3', 'js', 'css', 'scss'],
            axisLine: {
              show: false,
              lineStyle: {
                color: '#209F85',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: '#209F85',
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 4,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#209F85',
                width: 1
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#209F85',
                fontSize: 12
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#3a70c3',
                width: 2
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(114,126,68,0.15)'
              }
            }
          }
        ],
        series: [
          {
            name: '阅读量',
            type: 'bar',
            barWidth: 30,
            data: [122, 100, 98, 67, 12],
            smooth: true,
            itemStyle: {
              normal: {
                color: '#FF5E20'
              }
            }
          }
        ]
      }
    }
  }
}
</script>
